<template>
<!--  <v-scale-screen width="1980" height="1180" :fullScreen="true">-->
    <div class="container">
    <div class="main">
      <!-- 头部header -->
      <div class="header">
        <!--      时间展示-->
        <div class="header-left fl">
          <div class="header-left-date">
            <!--            111-->
          </div>
        </div>
        <!--      标题展示-->
        <div class="header-center fl">
          <div class="header-title">
            物联网数据集抄管理平台
          </div>
          <div class="header-img"></div>
        </div>
        <!--      天气展示-->
        <div class="header-right fl">
          <div class="header-right-weather">
            <a style="margin-right:15px;color: aliceblue;font-family: 'Adobe 仿宋 Std R'" title="返回首页">
              <span class="el-icon-s-home" @click="showSetting" style="padding: 0 5px;"></span>
              <el-tooltip :content="isShowLine ? '点击隐藏飞线' : '点击显示飞线'" placement="top" v-if="name !== 'haps'">
                <span class="el-icon-view" @click="showLine" style="padding: 0 5px;" v-show="isShowLine"></span>
              </el-tooltip>
              <el-tooltip :content="isShowLine ? '点击隐藏飞线' : '点击显示飞线'" placement="top" v-if="name !== 'haps'">
                <span class="el-icon-thumb" @click="showLine" style="padding: 0 5px;" v-show="!isShowLine"></span>
              </el-tooltip>
              {{ dateYear }} {{ dateWeek }} {{ dateDay }}
            </a>
          </div>
        </div>
      </div>

      <div class="center">
        <div class="map" style="position: fixed;top: 1.5rem;">
          <Map :isShowLine="isShowLine"></Map>
        </div>
        <div class="center-left fl">
          <div class="left-top border2">
            <div class="content-top">
              <span>大用户昨日用量（m³）</span>
              <span class="active"></span>
            </div>
            <!--            大用户表昨日用量排名前十-->
            <!--            第四名-->
            <div class="left-top-item">
              <div class="left-top-item_title font3">
                TOP4
              </div>
              <div class="left-top-item_content">
                <div class="left-top-item_content_factory">
                  <el-tooltip effect="dark" :content="usageTop4TerminalName" placement="top">
                    <span>{{ usageTop4TerminalName }}</span>
                  </el-tooltip>
                </div>
                <div class="left-top-item_content_dosage">{{ usageTop4TerminalValue }}
<!--                  <span style="font-family: 'Adobe 仿宋 Std R'">m³</span>-->
                </div>
              </div>
              <div class="left-top-item_img4"></div>
            </div>
            <!--            第二名-->
            <div class="left-top-item">
              <div class="left-top-item_title font2">TOP2</div>
              <div class="left-top-item_content">
                <div class="left-top-item_content_factory">
                  <el-tooltip style="width: .2rem" effect="dark" :content="usageTop2TerminalName" placement="top">
                    <span>{{ usageTop2TerminalName }}</span>
                  </el-tooltip>
                </div>
                <div class="left-top-item_content_dosage">{{ usageTop2TerminalValue }}
<!--                  <span style="font-family: 'Adobe 仿宋 Std R'">m³</span>-->
                </div>
              </div>
              <div class="left-top-item_img2"></div>
            </div>
            <!--            第一名-->
            <div class="left-top-item">
              <div class="left-top-item_title font1">TOP1</div>
              <div class="left-top-item_content">
                <div class="left-top-item_content_factory">
                  <el-tooltip effect="dark" :content="usageTop1TerminalName" placement="top">
                    <span>{{ usageTop1TerminalName }}</span>
                  </el-tooltip>
                </div>
                <div class="left-top-item_content_dosage">{{ usageTop1TerminalValue }}
<!--                  <span style="font-family: 'Adobe 仿宋 Std R'">m³</span>-->
                </div>
              </div>
              <div class="left-top-item_img1"></div>
            </div>
            <!--            第三名-->
            <div class="left-top-item">
              <div class="left-top-item_title font2">TOP3</div>
              <div class="left-top-item_content">
                <div class="left-top-item_content_factory">
                  <el-tooltip effect="dark" :content="usageTop3TerminalName" placement="top">
                    <span>{{ usageTop3TerminalName }}</span>
                  </el-tooltip>
                </div>
                <div class="left-top-item_content_dosage">{{ usageTop3TerminalValue }}
<!--                  <span style="font-family: 'Adobe 仿宋 Std R'">m³</span>-->
                </div>
              </div>
              <div class="left-top-item_img3"></div>
            </div>
            <!--            第五名-->
            <div class="left-top-item">
              <div class="left-top-item_title font3">TOP5</div>
              <div class="left-top-item_content">
                <div class="left-top-item_content_factory">
                  <el-tooltip effect="dark" :content="usageTop5TerminalName" placement="top">
                    <span>{{ usageTop5TerminalName }}</span>
                  </el-tooltip>
                </div>
                <div class="left-top-item_content_dosage">{{ usageTop5TerminalValue }}
<!--                  <span style="font-family: 'Adobe 仿宋 Std R'">m³</span>-->
                </div>
              </div>
              <div class="left-top-item_img5"></div>
            </div>
          </div>
          <div class="left-cen border2">
            <!--          抄表数 抄表率-->
            <ReadingDataXb ref="readingData"></ReadingDataXb>
          </div>
          <!--          大用户表最新预警-->
          <div class="left-bottom border2">
            <NewAlarmDb></NewAlarmDb>
          </div>
        </div>
        <!--      中间-->
        <div class="center-cen fl">
          <el-row class="cen-top">
            <el-col :span="8" class="cen-top-list" v-for="item in data">
              <el-row class="cen-top-list_title">{{ item.title }}</el-row>
              <el-row class="cen-top-list_content">
                <!--                  类型-->
                <el-col :span="10" class="type">
                  <div :class="activeIndex === 0 ? 'active' : 'no_active'" @click="changeActive(0)"><span>智能户表</span>
                  </div>
                  <div :class="activeIndex === 1 ? 'active' : 'no_active'" @click="changeActive(1)">
                    <span>大用户表</span></div>
                </el-col>
                <!-- 数据 -->
                <el-col :span="14" class="data">
                  <span class="num">{{ activeIndex === 1 ? item.dbnum : item.xbnum }}
                  </span>
                  <span>
                        {{ item.unit }}
                  </span>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>

        <div class="center-right fr">
          <!--          户表日用量排名前十-->
          <div class="right-top border2">
            <DayDosageTop10Xb></DayDosageTop10Xb>
          </div>
          <!--          大用户表昨日预警数量统计-->
          <div class="right-cen border2">
            <AlarmStatisticsDb ref="alarmStatistics"></AlarmStatisticsDb>
          </div>
          <!--          最近七天大表设备总用水量-->
          <div class="right-bottom border2">
            <RencentlyDosageDb ref="recentlyDosageDb"></RencentlyDosageDb>
          </div>
        </div>
      </div>
    </div>
  </div>
<!--  </v-scale-screen>-->

</template>
<script>
import {dataForBigScreen} from "../../api/bigScreen";
import {usageTop10ForDb} from '@/api/index/terminal.js'
import $ from "jquery";
import AlarmStatisticsDb from './component/AlarmStatisticsDb.vue'
import NewAlarmDb from "./component/NewAlarmDb.vue";
import DayDosageTop10Xb from "./component/DayDosageTop10Xb.vue";
import AreaDosageXb from "./component/AreaDosageXb.vue";
import ReadingDataXb from "./component/ReadingDataXb.vue";
import Map from './component/Map.vue';
import RencentlyDosageDb from './component/RencentlyDosageDb.vue';
import {formatTime } from '@/utils/timeUtils.js';

export default {
  name: 'BigScreen',
  components: {Map, DayDosageTop10Xb, AlarmStatisticsDb, NewAlarmDb, AreaDosageXb, ReadingDataXb, RencentlyDosageDb},
  data() {
    return {
      // 飞线的显示与隐藏
      isShowLine: true,
      // 大表用量前五
      usageTop1TerminalName: null,
      usageTop1TerminalValue: null,
      usageTop2TerminalName: null,
      usageTop2TerminalValue: null,
      usageTop3TerminalName: null,
      usageTop3TerminalValue: null,
      usageTop4TerminalName: null,
      usageTop4TerminalValue: null,
      usageTop5TerminalName: null,
      usageTop5TerminalValue: null,
      src: '/bigscreen/bigdata.html',
      data: [{title: '设备总数', dbnum: null, xbnum: null, unit: '台'}, {
        title: '用户总数',
        dbnum: null,
        xbnum: null,
        unit: '个'
      }, {title: '昨日抄回数', dbnum: null, xbnum: null, unit: '台'}],
      usageTop10DbList: [],
      activeIndex: 0,
      xbWarnList: [],
      dbWarnList: [],
      recentlyDosageDbList: [],
      recentlyDosageXbList: [],
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //星期
      // 大表抄表率
      dbCopy: [],
      // 小表抄表率
      xbCopy: [],
    };
  },
  watch: {
    recentlyDosageDbList(newVal) {
      this.$refs.recentlyDosageDb.updateListDb(newVal)
    },
    recentlyDosageXbList(newVal) {
      this.$refs.recentlyDosageDb.updateListXb(newVal)
    },
    dbCopy(newVal) {
      this.$refs.readingData.getListDb(newVal)
    },
    xbCopy(newVal) {
      this.$refs.readingData.getListXb(newVal)
    }
  },
  computed: {
    name() {
      return this.$store.state.user.name
    },
  },
  mounted() {
    this.timeFun()
    this.getTime()
    // $(function () {
    //   $('.myscroll').myScroll({
    //     speed: 60, //数值越大，速度越慢
    //     rowHeight: 40 //li的高度
    //   });
    // });
    this.setRem()
    this.getUsageTop10ForDb()
    this.getDataForBigScreen()
// 监听窗口大小变化
    window.addEventListener('resize', this.setRem);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setRem)
  },
  destroyed() {
    document.getElementsByTagName('html')[0].style.fontSize = 'unset'
  },
  methods: {
    // 是否展示飞线
    showLine() {
      this.isShowLine = !this.isShowLine
    },
    // 返回首页
    showSetting(){
      // this.destoryT();
      this.$router.push({
        path: "/index"
      });
    },
    // destoryT(){
    //   while(this.timerH>0){
    //     clearInterval(this.timerH);
    //     this.timerH--;
    //   }
    //   while(this.timerTimeliness>0){
    //     clearInterval(this.timerTimeliness)
    //     this.timerTimeliness--;
    //   }
    // },
    // 获取当前时间
    getTime() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    // 获取设备总数、用户总数、昨日抄回数据
    getDataForBigScreen() {
      dataForBigScreen().then(response => {
        if (response.code === 200) {
          this.data[0].dbnum = response.data.dbCount
          this.data[0].xbnum = response.data.xbCount
          this.data[1].dbnum = response.data.dbUserCount
          this.data[1].xbnum = response.data.xbUserCount
          this.data[2].dbnum = response.data.dbYesterdayCopyCount
          this.data[2].xbnum = response.data.xbYesterdayCopyCount
          this.xbWarnList = response.data.xbWarn
          this.dbWarnList = response.data.dbWarn
          this.recentlyDosageDbList = response.data.dbUsage
          this.recentlyDosageXbList = response.data.xbUsage
          this.dbCopy = response.data.dbCopy
          this.xbCopy = response.data.xbCopy
        }
      })
    },
    // 获取昨日大表用量排名前五的设备数据
    getUsageTop10ForDb() {
      usageTop10ForDb({n: 5}).then(response => {
        if (response.code === 200) {
          if (response.data && response.data.length > 0) {
            this.usageTop1TerminalName = response.data[0].terminalName
            this.usageTop1TerminalValue = response.data[0].value
            this.usageTop2TerminalName = response.data[1].terminalName
            this.usageTop2TerminalValue = response.data[1].value
            this.usageTop3TerminalName = response.data[2].terminalName
            this.usageTop3TerminalValue = response.data[2].value
            this.usageTop4TerminalName = response.data[3].terminalName
            this.usageTop4TerminalValue = response.data[3].value
            this.usageTop5TerminalName = response.data[4].terminalName
            this.usageTop5TerminalValue = response.data[4].value
          }
        }
      })
    },
    setRem() {
      // 定义一个基准尺寸
      const baseSize = 22;
      // 当前窗口的宽度 document.documentElement.clientWidth 获取的是<html>元素的宽度，而document.body.clientWidth 获取的是<body>元素的宽度
      const windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
      // 计算得到html的font-size 根据窗口宽度和基准尺寸计算出新的字体大小
      const htmlFontSize = windowWidth / baseSize;
      // 设置html的font-size 将计算出的字体大小设置为HTML根元素的fontSize样式，这样整个页面的字体大小都会根据窗口宽度自动调整
      document.documentElement.style.fontSize = `${htmlFontSize}px`;
    },
    changeActive(index) {
      this.activeIndex = index
    },
    // 定时器 控制展示的是大用户表内容还是户表内容
    timeFun() {
      let timer = null
      timer = setInterval(() => {
        if (this.activeIndex >= 1) {
          this.activeIndex = 0
        } else {
          this.activeIndex++
        }
      }, 3000)
    }
  }
}
</script>
<!--<style src="../../assets/static/css/wodry.css" scoped></style>-->
<style src="../../assets/static/css/index.css" scoped></style>
<style src="../../assets/static/css/public.css" scoped></style>
<style lang="scss" scoped>
.container {
  padding: .1rem;
  background: url("../../assets/static/image/my_bg.jpg") no-repeat;
  background-size: 100% 100%;
  font-size: .16rem;
  color: #ffffff;
  position: relative;
  //width: 22.07rem;
  //height: 10.56rem;
  width: 100%;
  height: 100%;
  font-family: myFirstFont !important;
}
.content-top {
  cursor: pointer;
  line-height: 5vh;
  padding-left: .2rem;
  height: 5vh;
  .active{
    color: #fff;
  }
  span {
    //color: #00d8ff;
    font-family: "Adobe 仿宋 Std R";
    font-size: .2rem;
    font-weight: 520;
    padding: 0 .1rem;
  }

  span:first-child {
    //border-right: 0.01rem solid #1950c4;
    padding-left: 0;
  }

  //.active-type {
  //  font-size: .18rem;
  //  margin: .1rem;
  //  padding: .05rem .05rem;
  //  background: #3aa0e5;
  //  color: white;
  //  border-radius: 5px;
  //}
}
</style>
